介紹

昨天我們成功跟 Gemini 簽訂契約，並在 Terminal（黑底白字命令列）裡印出了第一句傲嬌的回應。但說實話...一直看著 Terminal 互動，感覺就像在跟一台販賣機談戀愛一樣，完全沒有「角色陪伴」的感覺啊！

所以今天我們要來幫我們的 AI 角色「畫出第一個對話視窗」！
我選用 Python 界最狂的前端神器 Streamlit，完全不需要懂 HTML/CSS/JavaScript，幾行 Code 就能把類似 ChatGPT / Claude 的聊天介面刻出來！

今天的目標：

1. 用 st.chat_message 與 st.chat_input 刻出聊天 UI
2. 利用 st.session_state 解決 Streamlit 經典的「金魚腦重整」問題

第一關：造出聊天介面

Streamlit 有一個非常獨特的機制：只要使用者在頁面上做任何操作（例如按下 Enter 送出文字），整個 Python 腳本就會從頭到尾重新執行一次（Re-run）！

如果我們只是把對話紀錄放在一般變數裡，頁面一刷新，剛才聊過的紀錄就會像被施了「忘憂魔法」一樣直接蒸發。

為了解決這個問題，我們必須使用 Streamlit 的「靈魂保存容器」(st.session_state)！

新建一個 app.py

在 Streamlit 中，app.py 是整個應用程式的入口點。為了打造具備記憶功能與角色人設的 AI 對話介面，程式碼主要由以下 6 個核心模組組成：

• 環境與頁面配置： 載入 .env 密鑰，並透過 st.set_page_config() 設定網頁標題、頁籤 Icon 與寬螢幕版型（layout="wide"）。
• Gemini Client 初始化： 使用 @st.cache_resource 快取機制建立 API 連線，避免 Streamlit 頁面重繪（Re-run）時重複初始化。
• 雙重狀態記憶（Session State）：
  • 前端記憶：利用 st.session_state.messages 保存歷史對話陣列，解決頁面重新執行時 UI 畫面清空的問題。
  • 後端記憶：將 client.chats.create() 物件存入 st.session_state.chat，防止每次互動連線被重置。
• 動態渲染歷史紀錄： 透過 for 迴圈讀取歷史訊息，並根據發言對象（user / assistant）動態套用對應的頭像 Icon。
• 使用者輸入處理： 使用 st.chat_input() 接收訊息並實時更新至 UI 與歷史紀錄中。
• AI 角色回應與 Prompt 控制： 設定 system_instruction 限制角色以「傲嬌人設」且「單句回覆」輸出，並改用 send_message() 實現上下文對話。

import streamlit as st
from dotenv import load_dotenv
from google import genai
from google.genai import types

# 載入 API Key
load_dotenv()

# 設定網頁標題與圖示
st.set_page_config(page_title="AI 角色陪伴系統", page_icon="images/AI_icon.png", layout="wide")
st.title("你的專屬 AI 陪伴 Agent")

# 初始化 Gemini Client
@st.cache_resource
def get_gemini_client():
    return genai.Client()

client = get_gemini_client()

# 初始化 Session State
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "assistant", "content": "哼！別以為我是特地在這裡等你的，只是剛好程式啟動了而已！有什麼事快說！"}
    ]

USER_AVATAR = "images/USER_icon.png"  # 使用者的圖片（沒有圖片也可以用 Emoji）
AI_AVATAR = "images/AI_icon.png"      # AI 角色的圖片

# 初始化 Gemini 記憶對話物件
if "chat" not in st.session_state:
    st.session_state.chat = client.chats.create(
        model="gemini-3.6-flash",
        config=types.GenerateContentConfig(
            system_instruction="你現在是一個傲嬌角色。請直接以第一人稱回覆使用者，回答請簡短，不要列出選項或多餘說明。"
        )
    )

# 歷史對話紀錄
for msg in st.session_state.messages:
    # 判斷如果是 assistant 就用圖片，否則用預設/其他頭像
    avatar_icon = AI_AVATAR if msg["role"] == "assistant" else USER_AVATAR

    with st.chat_message(msg["role"], avatar=avatar_icon):
        st.write(msg["content"])

# 接收使用者輸入
if user_input := st.chat_input("跟你的角色說點什麼吧..."):
    # 顯示使用者發送的訊息
    with st.chat_message("user", avatar=USER_AVATAR):
        st.write(user_input)

    # 存入 Session 歷史
    st.session_state.messages.append({"role": "user", "content": user_input})

    # 用 send_message！Gemini 會自動帶入之前的對話上下文
    response = st.session_state.chat.send_message(user_input)

    # 顯示 AI 角色的回應
    with st.chat_message("assistant", avatar=AI_AVATAR):
        st.write(response.text)

    # 存入 Session 歷史
    st.session_state.messages.append({"role": "assistant", "content": response.text})

第二關：啟動魔法陣！

今日測試

(venv) PS D:\Character Interaction and Situations Agent> streamlit run app.py
2026-08-20 02:06:25.381 Uvicorn server started on :::8501

畫面展示

本日踩坑：金魚腦悲劇

今天雖然成功讓角色從命令列 NPC，進化成有對話視窗的角色。但我馬上發現一個嚴重的問題：

st.session_state 可以保存目前 Session 的對話狀態，但無法提供跨 Session 的永久記憶。

只要我按下瀏覽器的 F5 重新整理，或是把分頁關掉再打開，我們所經歷的點點滴滴宛如泡沫一般消失的無影無蹤！角色秒變金魚腦！

看來只靠短期記憶，終究無法承受跨 Session 的考驗。

下一站( Day 04 and Day 05 )，就是為角色打造真正的長期記憶 ，Firebase。